<template>
    <div class="quill-editor">
        <slot name="toolbar"></slot>
        <div ref="editor"></div>
    </div>
</template>

<script>

    // 注意：需要修改node_modules/dist/quill.js的的matchText()函数，
    // 让它不处理<p>标记内的空格
    // if (node.parentNode.tagName === 'P') {
    //  return delta.insert(text);
    // }

    export default {
        name: 'ERichEditor',
        data: function () {
            return {
                _content: '',
                defaultModules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 2 }],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'indent': '-1' }, { 'indent': '+1' }],
                        [{ 'direction': 'rtl' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'font': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                        ['link', 'image', 'video']
                    ]
                }
            }
        },
        props: {
            value: String,
            disabled: Boolean,
            options: {
                type: Object,
                required: false,
                default: function () {
                    return {}
                }
            }
        },
        mounted: function () {
            this.initialize()
        },
        beforeDestroy: function () {
            this.quill = null
        },
        methods: {
            initialize: function () {
                if (this.$el) {

                    // options and instance
                    var self = this
                    self.options.theme = self.options.theme || 'snow'
                    self.options.boundary = self.options.boundary || document.body
                    self.options.modules = self.options.modules || self.defaultModules
                    self.options.modules.toolbar = self.options.modules.toolbar !== undefined
                        ? self.options.modules.toolbar
                        : self.defaultModules.toolbar
                    self.options.placeholder = self.options.placeholder || 'Insert text here ...'
                    self.options.readOnly = self.options.readOnly !== undefined ? self.options.readOnly : false
                    self.quill = new Quill(self.$refs.editor, self.options)

                    // set editor content
                    if (self.value) {
                        self.quill.clipboard.dangerouslyPasteHTML(self.value)
                    }

                    // mark model as touched if editor lost focus
                    self.quill.on('selection-change', (range) => {
                        if (!range) {
                            self.$emit('blur', self.quill)
                        } else {
                            self.$emit('focus', self.quill)
                        }
                    })

                    // update model if text changes
                    self.quill.on('text-change', (delta, oldDelta, source) => {
                        var html = self.$refs.editor.children[0].innerHTML
                        var text = self.quill.getText()
                        if (html === '<p><br></p>') html = ''
                        self._content = html
                        self.$emit('input', self._content)
                        self.$emit('change', {
                            editor: self.quill,
                            html: html,
                            text: text
                        })
                    })

                    // disabled
                    if (this.disabled) {
                        this.quill.enable(false)
                    }

                    // emit ready
                    self.$emit('ready', self.quill)
                }
            }
        },
        watch: {
            value: function (newVal, oldVal) {
                if (this.quill) {
                    if (!!newVal && newVal !== this._content) {
                        this._content = newVal
                        this.quill.clipboard.dangerouslyPasteHTML(newVal)
                    } else if (!newVal) {
                        this.quill.setText('')
                    }
                }
            },
            disabled: function (newVal, oldVal) {
                if (this.quill) {
                    this.quill.enable(!newVal)
                }
            }
        }
    }
</script>

<style>
    .quill-editor img {
        max-width: 100%;
    }
</style>